<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style>
			.datepicker-input{height: 34px; border: 1px solid #D3D3D3; background-color: #fff; border-radius: 2px; width: 150px; padding: 0px 4px;}
		</style>
		<div class="super-theme-example">
			<div id="tt" class="easyui-tabs" data-options="fit:true,tabPosition:'left',onSelect:app_monitor.tabSelectEvent">
				<div title="商品数据" style="padding:10px">
					<div class="options-toolbar">	
						<form id="monitor-product-params">
							<input class="easyui-textbox" name="productId" data-options="width:100,prompt:'商品ID...'">
							<select class="easyui-combobox" name="productStatus" style="width:120px;">
							    <option value="">全部状态</option>
							    <option value="10">上线中</option>
							    <option value="-10">已下线</option>
							</select>
							<select id="shopHostCombo" class="easyui-combobox" name="hostName" style="width:150px;"></select>
							<select id="moduleCategoryId" name="categoryId" class="easyui-combobox" style="width: 160px;"></select>
							<input class="easyui-textbox" name="minPrice" data-options="width:60,prompt:'最低价...'">
							<span>-</span>
							<input class="easyui-textbox" name="maxPrice" data-options="width:60,prompt:'最高价...'">
							查询:<input id="monitor-query-datepicker" class="datepicker-input" />
							同比:<input id="monitor-mom-datepicker" class="datepicker-input" />
							上架:<input id="product-up-datepicker" class="datepicker-input" value="" placeholder="上架日期" />
							<a href="javascript:void(0)" class="easyui-linkbutton primary" data-options="iconCls:'fa fa-search'" onclick="app_monitor.product.queryDatagrid();">查询</a>
						</form>
						<div class="top-options">
							<a href="javascript:void(0)" class="easyui-menubutton info" data-options="menu:'#shop_monitor_list_tools'">操作</a>
							<div id="shop_monitor_list_tools" style="width:120px;">
								<div data-options="iconCls:'fa fa-search'" onclick="app_monitor.product.getSummary();">汇总</div>
								<div data-options="iconCls:'fa fa-download'" onclick="exportExcel(commonConfig.shopUrlPrefix() + '/monitor/product/export' , app_monitor.product.initDatagridQueryParams())">导出</div>
							</div>
						</div>
					</div>
					<table id="monitor-product-datagrid" style="width: 100%;"></table>
				</div>
				<div title="页面数据" style="padding:10px">
					<div class="options-toolbar">	
						<form id="monitor-page-params">
							<input id="monitor-page-datepicker" class="datepicker-input" />
							<a href="javascript:void(0)" class="easyui-linkbutton primary" data-options="iconCls:'fa fa-search'" onclick="app_monitor.page.queryDatagrid();">查询</a>
						</form>
					</div>
					<table id="monitor-page-datagrid" style="width: 100%;"></table>
				</div>
				<div title="事件数据" style="padding:10px">
					<div class="options-toolbar">	
						<form id="monitor-event-params">
							<input id="monitor-event-datepicker" class="datepicker-input" />
							<a href="javascript:void(0)" class="easyui-linkbutton primary" data-options="iconCls:'fa fa-search'" onclick="app_monitor.events.queryDatagrid();">查询</a>
						</form>
					</div>
					<table id="monitor-event-datagrid" style="width: 100%;"></table>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var app_monitor = {
				datas : {
					combotree_module_catrgory: null,
					combotree_module_catrgory_parent_ids: [],
				},
				tabSelectEvent: function(title,index){
					if(index == 0){
						app_monitor.product.init();
					}else if(index == 1){
						app_monitor.page.init();
					}else if(index == 2){
						app_monitor.events.init();
					}
				},
				init: function(){
				},
				product: {
					init: function(){
						app_monitor.product.initQueryParams();
						app_monitor.product.initMonitorProductDatagrid();
					},
					getModuleCatoryParentId:function(data){
						var _ids = [] ;
						data.map(function(e,i){
							if(e.categories && e.categories.length > 0){
								app_monitor.datas.combotree_module_catrgory_parent_ids.push(e.id) // 所有的非叶子节点
								app_monitor.product.getModuleCatoryParentId(e.categories);
							}
						})
					},
					initQueryParams: function(){
						$('#shopHostCombo').combobox({
						    url: commonConfig.shopUrlPrefix() + '/shop/host/combobox',
						    valueField: 'id',
						    textField: 'text'
						});
						app_monitor.datas.combotree_module_catrgory = $('#moduleCategoryId').combotree({
						    url: commonConfig.shopUrlPrefix() + '/category/tree-list',
						    queryParams: app_monitor.product.initDatagridQueryParams(),
							method: 'GET',
							multiple: true,
						    loadFilter: function(data,parent){
								if(data && data.code == 1){
									// 获得所有父级的id    app_monitor.datas.combotree_module_catrgory_parent_ids
									app_monitor.datas.combotree_module_catrgory_parent_ids = []
									app_monitor.product.getModuleCatoryParentId(data.datas)
									// 渲染
									var treeRoot = {'text' : '全部分类', 'id': ''};
									if(data.datas.length == 0){
										return [treeRoot];
									}else{
										var _treeData = [] ; 
										$.each(data.datas, function(index , treeData) {
											var _tmpData = {
											 		id: treeData.id,
											 		text: treeData.name,
											 		attributes: {
											 			parentId: treeData.parentId,
											 			priority: treeData.priority,
											 			comments: treeData.comments
											 		}
											};
											var _tmpDataChildren = app_monitor.product.findTreeChildrens(treeData);
											if(_tmpDataChildren){
												_tmpData.children = _tmpDataChildren ; 
											}
											 _treeData.push(_tmpData);
										});
										treeRoot.children = _treeData ; 
										return [treeRoot] ; 
									}
								}
								return [] ; 
							},
							// onBeforeSelect: function(node){
							// 	console.log(node)
							// 	if(node.id && node.id != '' && node.children && node.children.length > 0) return false;
							// }
						});
						$('#monitor-query-datepicker').daterangepicker($.extend({} , monitorlDaterangepickerOptions, {startDate: moment().startOf('day').subtract(1, 'days'), endDate: moment().endOf('day').subtract(1, 'days')}));
						$('#monitor-mom-datepicker').daterangepicker($.extend({}, monitorlDaterangepickerOptions, {startDate: moment().startOf('day').subtract(2, 'days'), endDate: moment().endOf('day').subtract(2, 'days')}));
						
						$('#product-up-datepicker').daterangepicker($.extend({}, globalDaterangepickerOptions, {autoUpdateInput:false}));
						$('#product-up-datepicker').on('apply.daterangepicker', function(ev, picker) {
							$(this).val(picker.startDate.format('YYYY-MM-DD HH:mm:ss') +' - '+picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
						});
						
					},
					findTreeChildrens: function(treeDatas){
						if(!treeDatas.categories || treeDatas.categories.length == 0) return null ;
						var _children = [] ;
						$.each(treeDatas.categories, function(index , _temp) {
							var childrenNode = {
								id: _temp.id,
						 		text: _temp.name,
						 		attributes: {
						 			parentId: _temp.parentId,
						 			priority: _temp.priority,
						 			comments: _temp.comments
						 		}
							};
							var _tempChildren = app_monitor.product.findTreeChildrens(_temp);
							if(_tempChildren){
								childrenNode.children = _tempChildren ; 
							}
							_children.push(childrenNode);
						});
						return _children ; 
					},
					initDatagridQueryParams: function(){
						var params = $('#monitor-product-params').serializeArray();
						var queryParams = {};
						$.each(params , function(index , param){
						     queryParams[param.name] = param.value;
						})
						var queryTime = $('#monitor-query-datepicker').val();
						queryParams.queryStartTime = queryTime.substring(0, 10);
						queryParams.queryEndTime = queryTime.substring(13);
						
						var momTime = $('#monitor-mom-datepicker').val();
						queryParams.momStartTime = momTime.substring(0, 10);
						queryParams.momEndTime = momTime.substring(13);
						
						var upTime = $('#product-up-datepicker').val();
						if(upTime && upTime != ''){
							queryParams.upStartTime = timestamp(upTime.substring(0, 19));
							queryParams.upEndTime = timestamp(upTime.substring(22));
						}
						
						queryParams.productId = queryParams.productId.replace(/[\r\n，]/g,",");

						// 所有的类目id, 只留叶子结点
						var combotree_module_catrgory_parame = app_monitor.datas.combotree_module_catrgory && app_monitor.datas.combotree_module_catrgory.combotree('getValues')
						var end_combotree_module_catrgory_parame = []
						if(combotree_module_catrgory_parame && combotree_module_catrgory_parame.length > 0){
							combotree_module_catrgory_parame.map((e)=>{
								var state = 0
								app_monitor.datas.combotree_module_catrgory_parent_ids.map(function(_e){
									if(_e == e){
										state++
									}
								})
								state == 0 && end_combotree_module_catrgory_parame.push(e)
							})
							end_combotree_module_catrgory_parame = end_combotree_module_catrgory_parame.join()
						}else{
							end_combotree_module_catrgory_parame = combotree_module_catrgory_parame
						}
						queryParams.categoryIds = end_combotree_module_catrgory_parame
						delete queryParams.categoryId
						return queryParams;
					},
					queryDatagrid: function(){
						$('#monitor-product-datagrid').datagrid('reload',app_monitor.product.initDatagridQueryParams());
					},
					initMonitorProductDatagrid: function(){
						$('#monitor-product-datagrid').datagrid({
							height: $(document).height() - 220,
						    url: commonConfig.shopUrlPrefix() + '/monitor/product',
						    queryParams: app_monitor.product.initDatagridQueryParams(),
						    columns:[[
								{field:'product_id',title:'商品ID',width:60,align:'center'},
								{field:'title',title:'商品标题',width:120,align:'center'},
								{field:'price',title:'商品单价',width:80,align:'center'},
								{field:'image',title:'主图',width:80,align:'center',formatter: function(value,row,index){return '<img class="td-img" src="'+ value +'">';}},
								{field:'upAt',title:'上架时间',width:120,align:'center',formatter: function(value,row,index){return row.up_at;}},
								{field:'vo.VIEW',title:'点击',width:80,align:'center',sortable: true, order: 'desc', formatter: function(value,row,index){
									return app_monitor.product.formatterProductMonitor(row.VIEW , row.VIEW_MOM);
								}},
								{field:'vo.ADD_TO_CART',title:'加购',width:80,align:'center',sortable: true, order: 'desc', formatter: function(value,row,index){
									return app_monitor.product.formatterProductMonitor(row.ADD_TO_CART , row.ADD_TO_CART_MOM);
								}},
								{field:'vo.BUY_NOW',title:'立即购买',width:80,align:'center',sortable: true, order: 'desc', formatter: function(value,row,index){
									return app_monitor.product.formatterProductMonitor(row.BUY_NOW , row.BUY_NOW_MOM);
								}},
								{field:'vo.PURCHASE',title:'结算',width:80,align:'center',sortable: true, order: 'desc', formatter: function(value,row,index){
									return app_monitor.product.formatterProductMonitor(row.PURCHASE , row.PURCHASE_MOM);
								}},
								{field:'cart_delete',title:'购物车删除',width:80,align:'center',formatter: function(value,row,index){
									return app_monitor.product.formatterProductMonitor(row.CART_DELETE , row.CART_DELETE_MOM);
								}},
								{field:'options1',title:'点击转化率',width:80,align:'center',formatter: function(value,row,index){
									return app_monitor.product.formatterProductMonitorPercentage(row.CLICK_RATE , row.CLICK_RATE_MOM);
								}},
								{field:'options2',title:'转化结算率',width:80,align:'center',formatter: function(value,row,index){
									return app_monitor.product.formatterProductMonitorPercentage(row.PURCHASE_RATE , row.PURCHASE_RATE_MOM);
								}},
								{field:'options3',title:'点击结算率',width:80,align:'center', formatter: function(value,row,index){
									return app_monitor.product.formatterProductMonitorPercentage(row.VIEW_PURCHASE_RATE , row.VIEW_PURCHASE_RATE_MOM);
								}}
						    ]]
						});
					},
					formatterProductMonitor: function(value , value_mom){
						value = value || 0 ; value_mom = value_mom || 0 ; 
						if(value == 0 && value_mom == 0){
							return '<span>'+value+'</span><span style="margin-left: 5px;">('+value_mom+')</span>' ;
						}else if(value > 0 && value_mom == 0){
							return '<span style="color: red">'+value+'</span><span style="margin-left: 5px;">('+value_mom+')</span>' ;
						}else if(value == 0 && value_mom > 0){
							return '<span style="color: green">'+value+'</span><span style="margin-left: 5px;">('+value_mom+')</span>' ;
						}else if(value > 0 && value_mom > 0){
							var _tmp = (value - value_mom)/value_mom;
							if(_tmp > 0 && _tmp > 0.05)return '<span style="color: red">'+value+'</span><span style="margin-left: 5px;">('+value_mom+')</span>' ;
							if(_tmp < 0 && _tmp < -0.05)return '<span style="color: green">'+value+'</span><span style="margin-left: 5px;">('+value_mom+')</span>' ;
						}
						return '<span>'+value+'</span><span style="margin-left: 5px;">('+value_mom+')</span>' ;
					},
					formatterProductMonitorPercentage: function(value , value_mom){
						value = value || 0 ; value_mom = value_mom || 0 ; 
						value = Math.round(value * 10000)/100 ; value_mom = Math.round(value_mom * 10000)/100 ; 
						if(value == 0 && value_mom == 0){
							return '<span>'+value+'%</span><span style="margin-left: 5px;">('+value_mom+'%)</span>' ;
						}else if(value > 0 && value_mom == 0){
							return '<span style="color: red">'+value+'%</span><span style="margin-left: 5px;">('+value_mom+'%)</span>' ;
						}else if(value == 0 && value_mom > 0){
							return '<span style="color: green">'+value+'%</span><span style="margin-left: 5px;">('+value_mom+'%)</span>' ;
						}else if(value > 0 && value_mom > 0){
							var _tmp = (value - value_mom)/value_mom;
							if(_tmp > 0 && _tmp > 0.05)return '<span style="color: red">'+value+'%</span><span style="margin-left: 5px;">('+value_mom+'%)</span>' ;
							if(_tmp < 0 && _tmp < -0.05)return '<span style="color: green">'+value+'%</span><span style="margin-left: 5px;">('+value_mom+'%)</span>' ;
						}
						return '<span>'+value+'%</span><span style="margin-left: 5px;">('+value_mom+'%)</span>' ;
					},
					getSummary: function(){
						requestServer(commonConfig.shopUrlPrefix() + '/monitor/product/summary', 'GET', app_monitor.product.initDatagridQueryParams()).then((response) => {
							if (response.code == 1) {
								showErrorMsgs([response.datas] , [[
									{field:'add_to_cart',title:'加购',width:60,align:'center',formatter: function(value,row,index){
										return app_monitor.product.formatterProductMonitor(row.ADD_TO_CART , row.ADD_TO_CART_MOM);
									}},
									{field:'buy_now',title:'立即购买',width:80,align:'center',formatter: function(value,row,index){
										return app_monitor.product.formatterProductMonitor(row.BUY_NOW , row.BUY_NOW_MOM);
									}},
									{field:'cart_delete',title:'购物车删除',width:80,align:'center',formatter: function(value,row,index){
										return app_monitor.product.formatterProductMonitor(row.CART_DELETE , row.CART_DELETE_MOM);
									}},
									{field:'options1',title:'点击转化率',width:80,align:'center',formatter: function(value,row,index){
										return app_monitor.product.formatterProductMonitorPercentage(row.CLICK_RATE , row.CLICK_RATE_MOM);
									}},
									{field:'purchase',title:'结算',width:80,align:'center',formatter: function(value,row,index){
										return app_monitor.product.formatterProductMonitor(row.PURCHASE , row.PURCHASE_MOM);
									}},
									{field:'options2',title:'转化结算率',width:80,align:'center',formatter: function(value,row,index){
										return app_monitor.product.formatterProductMonitorPercentage(row.PURCHASE_RATE , row.PURCHASE_RATE_MOM);
									}},
									{field:'view',title:'点击',width:80,align:'center',formatter: function(value,row,index){
										return app_monitor.product.formatterProductMonitor(row.VIEW , row.VIEW_MOM);
									}},
									{field:'options3',title:'点击结算率',width:80,align:'center',formatter: function(value,row,index){
										return app_monitor.product.formatterProductMonitorPercentage(row.VIEW_PURCHASE_RATE , row.VIEW_PURCHASE_RATE_MOM);
									}}
								]]);
							}else {
								$.messager.alert('提示',response.message,'error');
							}
						}).catch((error) => {
							console.log(error)
						});
					}
				},
				page: {
					init: function(){
						app_monitor.page.initQueryParams();
						app_monitor.page.initMonitorPageDatagrid();
					},
					initQueryParams: function(){
						$('#monitor-page-datepicker').daterangepicker($.extend({} , monitorlDaterangepickerOptions, {startDate: moment().startOf('day').subtract(1, 'days'), endDate: moment().endOf('day').subtract(1, 'days')}));
					},
					initMonitorPageDatagrid: function(){
						$('#monitor-page-datagrid').datagrid({
							height: $(document).height() - 220,
						    url: commonConfig.shopUrlPrefix() + '/monitor/page',
						    queryParams: app_monitor.page.initDatagridQueryParams(),
						    columns:[[
								{field:'event_aims',title:'页面地址',width:120,align:'center',formatter: function(value,row,index){
									return decodeURIComponent(value);
								}},
								{field:'show_count',title:'展示次数',width:80,align:'center'}
						    ]]
						});
					},
					initDatagridQueryParams: function(){
						var params = $('#monitor-page-params').serializeArray();
						var queryParams = {};
						$.each(params , function(index , param){
						     queryParams[param.name] = param.value;
						})
						var queryTime = $('#monitor-page-datepicker').val();
						queryParams.queryStartTime = queryTime.substring(0, 10);
						queryParams.queryEndTime = queryTime.substring(13);
						return queryParams;
					},
					queryDatagrid: function(){
						$('#monitor-page-datagrid').datagrid('reload',app_monitor.page.initDatagridQueryParams());
					}
				},
				events: {
					init: function(){
						app_monitor.events.initQueryParams();
						app_monitor.events.initMonitorEventDatagrid();
					},
					initQueryParams: function(){
						$('#monitor-event-datepicker').daterangepicker($.extend({} , monitorlDaterangepickerOptions, {startDate: moment().startOf('day').subtract(1, 'days'), endDate: moment().endOf('day').subtract(1, 'days')}));
					},
					initMonitorEventDatagrid: function(){
						$('#monitor-event-datagrid').datagrid({
							height: $(document).height() - 220,
						    url: commonConfig.shopUrlPrefix() + '/monitor/event',
						    queryParams: app_monitor.events.initDatagridQueryParams(),
						    columns:[[
								{field:'event_aims',title:'事件名称',width:120,align:'center',formatter: function(value,row,index){
									if(value == 'CHANGE_PAYMENT_TYPE') return "变更支付方式" ;
									if(value == 'CLOSE_ADDRESS') return "直接关闭填写地址" ;
									if(value == 'COD_SUBMIT') return "货到付款下单" ;
									if(value == 'COMPLATE_ADDRESS') return "完成填写地址" ;
									if(value == 'CUSTOM_SERVICE') return "非落地页联系客服" ;
									if(value == 'FOOT_PRINT') return "查看足迹" ;
									if(value == 'HOT') return "点击热卖" ;
									if(value == 'INIT_CHECKOUT') return "准备结算" ;
									if(value == 'PRODUCT_CUSTOM_SERVICE') return "落地页联系客服" ;
									if(value == 'SEARCH_ORDER') return "搜索订单" ;
									if(value == 'SEARCH_SHOP') return "搜索商城" ;
									if(value == 'SIMILER_CLICK') return "相似产品点击" ;
									if(value == 'START_ADDRESS') return "开始填写地址" ;
									if(value == 'STRIPE_BEFORE_SUBMIT') return "STRIPE发起结账" ;
									if(value == 'STRIPE_SUBMIT') return "STRIPE结账完成" ;
									if(value == 'TO_TOP') return "回到顶部" ;
									
								}},
								{field:'click_count',title:'操作次数',width:80,align:'center'}
						    ]]
						});
					},
					initDatagridQueryParams: function(){
						var params = $('#monitor-event-params').serializeArray();
						var queryParams = {};
						$.each(params , function(index , param){
						     queryParams[param.name] = param.value;
						})
						var queryTime = $('#monitor-event-datepicker').val();
						queryParams.queryStartTime = queryTime.substring(0, 10);
						queryParams.queryEndTime = queryTime.substring(13);
						return queryParams;
					},
					queryDatagrid: function(){
						$('#monitor-event-datagrid').datagrid('reload',app_monitor.events.initDatagridQueryParams());
					}
				}
			}
			app_monitor.init();
		</script>
	</body>
</html>
